#include("../../comm/ListHead.html")
<div class="layui-fluid layui-anim layui-anim-scale">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md12 height-auto">
            <div class="layui-card">
                <div class="card-search SearchTable">
                    <p style="float:right">
                        <input type="text" id="roleid" placeholder="角色ID" autocomplete="off"
                               class="table-search-text width120">
                        <input type="text" id="rolename" placeholder="角色名" autocomplete="off"
                               class="table-search-text width150">
                        <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="DoSearch">
                            搜索
                        </button>
                    </p>
                    <i class="layui-icon layui-icon-triangle-r"></i>
                    当前位置 > <span class="color_green">系统角色列表</span>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="table_1" lay-filter="table_1"></table>

                    <script type="text/html" id="table_1_bar_title">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm btn-add" lay-event="AddSysRole">
                                <i class="layui-icon">&#xe608;</i> 添加新角色
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled" permission-one="btn-edit" lay-event="EditSysRole">修改</button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled" permission-one="btn-del" lay-event="DelSysRole">删除</button>
                        </div>
                    </script>

                    <script type="text/html" id="table_1_bar1">
                        <div class="layui-btn-container2">
                            <a class="layui-btn layui-btn-xs" lay-event="EditRole">修改</a>
                            <a class="layui-btn layui-btn-xs btn-change-13" lay-event="SetMenu">菜单</a>
                            <a class="layui-btn layui-btn-xs btn-change-8" lay-event="SetActivity">功能</a>
                            <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="SetUser">用户</a>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script language="JavaScript">

    layui.use(['myTable', 'table', 'form', 'util', 'myTool'], function () {
        table = layui.table, form = layui.form, myTool = layui.myTool;

        tableindex = layui.myTable.render({
            elem: '#table_1', skin: 'line'
            , url: 'SysRoleListApi'
            , toolbar: '#table_1_bar_title'
            , title: '系统角色表'
            , cols: [[
                {type: 'checkbox', width: 36}
                , {field: 'sindex', title: '顺序', width: 80, align: 'center', sort: true}
                , {field: 'role_id', title: '角色编号', width: 150}
                , {field: 'role_name', title: '角色名称', width: 150}
                , {field: 'user_count', title: '人数', width: 80, align: 'center'}
                , {field: 'role_desc', title: '说明', hide: false}
                , {fixed: 'right', title: '操作', toolbar: '#table_1_bar1', width: 200, align: 'center'}
            ]]
            , page: true, limit: 10
            , serviceSort: true, initSort: {field: 'sindex', type: 'asc'}
        });

        //搜索 和重载
        //搜索 和重载
        layui.util.event("lay-event", {
            SearchReload: function () {
                tableindex.reload({});
            },
            DoSearch: function () {
                tableindex.reload({
                    where: {like: {role_id: $("#roleid").val(), role_name: $("#rolename").val()}}
                    , page: {curr: 1}
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(table_1)', function (obj) {
            myTool.toolbar(this, obj, {
                AddSysRole: function (obj) {
                    index = top.layer.open({
                        type: 2, title: false,
                        area: ['1000px', '585px'], content: ["sysrole/AddSysRole", 'no']
                        , end: function () {
                            tableindex.reload();
                        }
                    });
                }
                , EditSysRole: function (obj) {
                    myTool.doSingleSelect(table.checkStatus('table_1'), {}, function (data, keys) {
                        index = top.layer.open({
                            type: 2, offset: '40px', title: false, area: ['1000px', '585px'],
                            content: ["sysrole/EditSysRole?role_id=" + data[0].role_id, 'no']
                            , end: function () {
                                tableindex.reload();
                            }
                        });
                    });
                }
                , DelSysRole: function (obj) {
                    myTool.doSingleSelect(table.checkStatus('table_1'), {}, function (data, keys) {
                        index = top.layer.confirm('你是否确认删除角色【' + data[0].role_name + '】', {icon: 3, title: '提示', offset: '30vh'}, function (index2) {
                            myTool.post("DelSysRoleApi", {role_id: data[0].role_id}, function () {
                                top.layer.closeAll();
                                tableindex.reload();
                            })
                        });
                    });
                }
            });
        });

        table.on('rowDouble(table_1)', function (obj) {
            top.layer.open({
                type: 2, offset: '40px', title: false, area: ['1000px', '585px'],
                content: ["sysrole/EditSysRole?role_id=" + obj.data.role_id, 'no']
                , end: function () {
                    tableindex.reload();
                }
            });
        });

        //头工具栏事件
        table.on('tool(table_1)', function (obj) {
            myTool.tool(this, obj, {
                EditRole: function (data) {
                    index = top.layer.open({
                        type: 2, offset: '40px', title: false, area: ['1000px', '585px'],
                        content: ["sysrole/EditSysRole?role_id=" + data.role_id, 'no']
                        , end: function () {
                            tableindex.reload();
                        }
                    });
                }
                , SetUser: function (data) {
                    index = top.layer.open({
                        type: 2, offset: '40px', title: false, area: ['1000px', '585px'],
                        content: ["sysrole/SetRoleUser?role_id=" + data.role_id, 'no']
                        , end: function () {
                            tableindex.reload();
                        }
                    });
                }
                , SetMenu: function (data) {
                    index = top.layer.open({
                        type: 2, offset: '40px', title: false, area: ['1000px', '585px'],
                        content: ["sysrole/SetRoleMenu?role_id=" + data.role_id, 'no']
                        , end: function () {
                            tableindex.reload();
                        }
                    });
                }
                , SetActivity: function (data) {
                    index = top.layer.open({
                        type: 2, offset: '40px', title: false, area: ['1000px', '585px'],
                        content: ["sysrole/SetRoleActivity?role_id=" + data.role_id, 'no']
                        , end: function () {
                            tableindex.reload();
                        }
                    });
                }
            });
        });

    });
</script>
</body>
</html>


